<template>
	<view class="bigBox" v-if="cart.length>=1">
		<My-address></My-address>
		<view class="moudel">
			<uni-icons custom-prefix="custom-icon" type="shop" size="18"></uni-icons>
			<text>购物车</text>
		</view>
		<uni-swipe-action>
			<view class="shop-item" v-for="(goods,i) in cart" :key="i" >
				<uni-swipe-action-item :options="options" @click="removeCart(goods)">
					<My-goods :goods="goods" :show="value" @cartCheck="setBadge"></My-goods> 
					
				</uni-swipe-action-item>
						
			</view>
		</uni-swipe-action>
		<view class="box-buttom">
				<My-settle></My-settle>
		</view>
	 </view>
	  <view class="sheap" v-else>
		  <image src="https://img2.baidu.com/it/u=3202312617,766989457&fm=253&fmt=auto&app=138&f=JPEG?w=546&h=500"></image>
	      <text>空空如也~~~~~~~</text>
		  <text>别舍不得你哪空空如也的钱包</text>
	  </view>
</template>

<script>
	export default {
	   
		data() {
			return {
			  value:true,
			  show:false,
			  options:[{
				  text:"删除",
				  style:{
					 backgroundColor:"#C00000"  
				  }
				
			  }]
			};
		},
		computed:{
			cart(){
				return uni.$Store.state.cartdata.cart
			}
		},
		methods:{
			
			setBadge(){
				uni.setTabBarBadge({
					index:2,
					text:uni.$Store.getters.total>0?uni.$Store.getters.total+"":this.removeBadge()
				})
			},
			removeBadge(){
				uni.removeTabBarBadge({
					index:2
				})
				// uni.$Store.getters.total
			},
			removeCart(item){
				console.log(item.goods_id)
				uni.$Store.commit("removeID",item.goods_id)
				uni.setStorageSync("cart",uni.$Store.state.cartdata.cart)
				this.setBadge()
			}
		},
		onShow(){
			this.setBadge()
		}
	}
</script>

<style lang="scss">
	
	.bigBox{
		padding-bottom:50px;
	}
  .moudel{
	  height:40px;
	  display:flex;
	  align-items:center;
	  padding-left:5px;
	  border-bootm:1px solid #efefef;
	  text{
		  margin-left:10px;
		  font-size:14px;
	  }
  }  
  .box-buttom{
	  position: fixed;
	  width: 100%;
	  bottom: 0;
	  paddong-left:5px;
  }
  .sheap{
	  margin-top:49%;
	  display: flex;
	  flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  image{
		  width:200px;
		  height:200px;
		  border-radius:50%;
	  }
	  text{
		  
	  }
  }
</style>
